<template>
  <div class="app-container">
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="form.links" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="图" prop="name">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="form.filePath"
              :src="BaseUrl + form.filePath"
              class="avatar"
              style="width: 300px; height: 150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="form.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      :title="title2"
      :visible.sync="open2"
      width="500px"
      append-to-body
    >
      <el-form ref="form2" :model="form2" :rules="rules" label-width="80px">
        <el-form-item label="描述" prop="name">
          <el-input v-model="form2.name" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="图" prop="filePath">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl2"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="form2.filePath"
              :src="BaseUrl + form2.filePath"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="form2.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel2">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 合作伙伴 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="titlePartner"
      :visible.sync="openPartner"
      width="500px"
      append-to-body
    >
      <el-form
        ref="formPartner"
        :model="formPartner"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="formPartner.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="formPartner.links" placeholder="请输入链接地址" />
        </el-form-item>

        <el-form-item label="图" prop="name">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrlPic"
            :show-file-list="false"
            :on-success="handleAvatarSuccessPartner"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="formPartner.filePath"
              :src="BaseUrl + formPartner.filePath"
              class="avatar"
              style="width: 300px; height: 150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formPartner.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formPartner.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormPartner">确 定</el-button>
        <el-button @click="cancelPartner">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 培训列表 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="titleTrain"
      :visible.sync="openTrain"
      width="500px"
      append-to-body
    >
      <el-form
        ref="formTrain"
        :model="formTrain"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="formTrain.links" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="图片描述" prop="discription">
          <el-input
            v-model="formTrain.discription"
            placeholder="请输入链接地址"
          />
        </el-form-item>
        <el-form-item label="图" prop="name">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrlPic"
            :show-file-list="false"
            :on-success="handleAvatarSuccessTrain"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="formTrain.filePath"
              :src="BaseUrl + formTrain.filePath"
              class="avatar"
              style="width: 300px; height: 150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formTrain.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formTrain.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormTrain">确 定</el-button>
        <el-button @click="cancelTrain">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 图片列表dialog -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title3"
      :visible.sync="open3"
      width="500px"
      append-to-body
    >
      <el-form ref="formPic" :model="formPic" :rules="rules" label-width="80px">
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="formPic.links" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="图片描述" prop="discription">
          <el-input
            v-model="formPic.discription"
            placeholder="请输入链接地址"
          />
        </el-form-item>
        <el-form-item label="图" prop="name">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrlPic"
            :show-file-list="false"
            :on-success="handleAvatarSuccessPic"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="formPic.filePath"
              :src="BaseUrl + formPic.filePath"
              class="avatar"
              style="width: 300px; height: 150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formPic.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formPic.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormPic">确 定</el-button>
        <el-button @click="cancelPic">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 品牌活动 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="openActivity"
      width="500px"
      append-to-body
    >
      <el-form
        ref="formActivity"
        :model="formActivity"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="formActivity.links" placeholder="请输入链接地址" />
        </el-form-item>
        <el-form-item label="描述" prop="discription">
          <el-input
            v-model="formActivity.discription"
            placeholder="请输入活动描述"
          />
        </el-form-item>

        <el-form-item label="图片" prop="name">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccessActivity"
            :before-upload="beforeAvatarUpload"
            :headers="headers"
          >
            <img
              v-if="formActivity.filePath"
              :src="BaseUrl + formActivity.filePath"
              class="avatar"
              style="width: 300px; height: 150px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formActivity.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formActivity.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormActivity">确 定</el-button>
        <el-button @click="cancelActivity">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 友情链接 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="openLink"
      width="500px"
      append-to-body
    >
      <el-form
        ref="formLink"
        :model="formLink"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="链接标题" prop="title">
          <el-input v-model="formLink.title" placeholder="请输入链接标题" />
        </el-form-item>
        <el-form-item label="链接地址" prop="links">
          <el-input v-model="formLink.links" placeholder="请输入链接地址" />
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formLink.status">
            <el-radio-button label="1">正常</el-radio-button>
            <el-radio-button label="0">停用</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formLink.sort"
            :min="1"
            :max="100"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormLink">确 定</el-button>
        <el-button @click="cancelLink">取 消</el-button>
      </div>
    </el-dialog>

    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="banner上传">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['page:notice:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['page:notice:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['page:notice:remove']"
              >删除</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['page:notice:export']"
        >导出</el-button>
      </el-col> -->
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <div style="width: 66.66666667%">
          <el-table
            v-loading="loading"
            :data="dataList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column
              header-align="center"
              prop="url"
              align="center"
              label="banner图片"
            >
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="click">
                  <a
                    :href="BaseUrl + scope.row.filePath"
                    target="_blank"
                    title="查看最大化图片"
                  >
                    <img
                      :src="BaseUrl + scope.row.filePath"
                      min-width="300"
                      height="300"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="BaseUrl + scope.row.filePath"
                    min-width="100"
                    height="100"
                    style="cursor: pointer"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="链接" align="center" prop="links" />

            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      size="medium"
                      :type="scope.row.status === 0 ? 'danger' : 'success'"
                      >{{ scope.row.status === 0 ? "停用" : "正常" }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="sort" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.rowsPerPage"
            :page-sizes="pageSizes"
            @pagination="getList"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="友情链接">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddLink"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdateLink"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDeleteLink"
              >删除</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['page:notice:export']"
        >导出</el-button>
      </el-col> -->
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getLinkList"
          ></right-toolbar>
        </el-row>

        <div style="width: 66.66666667%">
          <el-table
            v-loading="loading"
            :data="dataListLink"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="友情链接标题" align="center" prop="title" />
            <el-table-column label="链接地址" align="center" prop="links" />
            <el-table-column label="排序" align="center" prop="sort" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateLink(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteLink(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalLink > 0"
            :total="totalLink"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.rowsPerPage"
            :page-sizes="pageSizes"
            @pagination="getLinkList"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="公众号&APP">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd2"
              v-hasPermi="['page:notice:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single2"
              @click="handleUpdate2"
              v-hasPermi="['page:notice:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple2"
              @click="handleDelete2"
              v-hasPermi="['page:notice:remove']"
              >删除</el-button
            >
          </el-col>

          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList2"
          ></right-toolbar>
        </el-row>
        <div style="width: 66.66666667%">
          <el-table
            v-loading="loading2"
            :data="dataList2"
            @selection-change="handleSelectionChange2"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column
              label="名称"
              width="100"
              prop="name"
              align="center"
            />
            <el-table-column
              header-align="center"
              prop="filePath"
              align="center"
              label="二维码"
            >
              <!-- 图片的显示 -->
              <!-- <template  slot-scope="scope">            
                    <img :src="scope.row.url"  min-width="100" height="100" />
                 </template>  -->
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="click">
                  <!--trigger属性值：hover、click、focus 和 manual-->
                  <a
                    :href="BaseUrl + scope.row.filePath"
                    target="_blank"
                    title="查看最大化图片"
                  >
                    <img
                      :src="BaseUrl + scope.row.filePath"
                      min-width="300"
                      height="300"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="BaseUrl + scope.row.filePath"
                    min-width="100"
                    height="100"
                    style="cursor: pointer"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="排序"
              align="center"
              width="55"
              prop="sort"
            />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate2(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete2(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
            <pagination
              v-show="total2 > 0"
              :total="total2"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.rowsPerPage"
              :page-sizes="pageSizes"
              @pagination="getList2"
            />
          </el-table>
        </div>
      </el-tab-pane>

      <el-tab-pane label="关于我们">
        <div style="width: 66.66666667%">
          <el-form ref="form3" :model="form3" :rules="rules" label-width="80px">
            <el-form-item label="公司" prop="guanyuwomen">
              <el-input v-model="form3.guanyuwomen" placeholder="公司" />
            </el-form-item>

            <el-form-item label="地址" prop="address">
              <el-input v-model="form3.address" placeholder="地址" />
            </el-form-item>
            <el-form-item label="邮编" prop="postCode">
              <el-input v-model="form3.postCode" placeholder="邮编" />
            </el-form-item>
            <el-form-item label="电话" prop="tel">
              <el-input v-model="form3.tel" placeholder="电话" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form3.email" placeholder="邮箱" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm3">确 定</el-button>
            <el-button @click="cancel3">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane
        label="公司简介"
        style="height: 90%; overflow-y: auto; overflow-x: hidden"
      >
        <div style="width: 66.66666667%">
          <el-form ref="form4" :model="form4" :rules="rules" label-width="80px">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form4.title" placeholder="标题" />
            </el-form-item>

            <el-form-item label="内容" prop="context">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="form4.context"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="图" prop="filePath">
              <el-upload
                class="avatar-uploader"
                :action="uploadUrl3"
                :show-file-list="false"
                :on-success="handleAvatarSuccess4"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
              >
                <img
                  v-if="form4.filePath"
                  :src="BaseUrl + form4.filePath"
                  class="avatar"
                  style="width: 300px; height: 150px"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="描述" prop="discription">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="form4.discription"
              >
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm4">确 定</el-button>
            <el-button @click="cancel4">取 消</el-button>
          </div>
        </div>
      </el-tab-pane>

      <!-- <el-tab-pane label="图片列表">
        <div>
          <div class="position">图片展示</div>
          <div class="images">
            <div
              v-for="(item, index) in info"
              :key="index"
              class="image-middle"
            >
              <el-card shadow="hover" :body-style="{ padding: '10px' }">
                <el-popover>
                  <img :src="info[index].src" slot="reference" class="image" />
                  <img :src="info[index].src" class="imagePreview" />
                </el-popover>
                <div style="text-align: center; padding-top: 12px">
                  <span>{{ info[index].name }}</span>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </el-tab-pane> -->
      <el-tab-pane label="图片列表">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd3"
              v-hasPermi="['page:notice:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single3"
              @click="handleUpdate3"
              v-hasPermi="['page:notice:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple3"
              @click="handleDelete3"
              v-hasPermi="['page:notice:remove']"
              >删除</el-button
            >
          </el-col>
          <right-toolbar @queryTable="getList3"></right-toolbar>
        </el-row>

        <div style="width: 66.66666667%">
          <el-table
            v-loading="loading3"
            :data="dataList3"
            @selection-change="handleSelectionChange3"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column
              header-align="center"
              prop="url"
              align="center"
              label="图片"
            >
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="click">
                  <a
                    :href="BaseUrl + scope.row.filePath"
                    target="_blank"
                    title="查看最大化图片"
                  >
                    <img
                      :src="BaseUrl + scope.row.filePath"
                      min-width="300"
                      height="300"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="BaseUrl + scope.row.filePath"
                    min-width="100"
                    height="100"
                    style="cursor: pointer"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="链接" align="center" prop="links" />
            <el-table-column label="描述" align="center" prop="discription" />
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      size="medium"
                      :type="scope.row.status === 0 ? 'danger' : 'success'"
                      >{{ scope.row.status === 0 ? "停用" : "正常" }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="sort" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate3(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete3(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total3 > 0"
            :total="total3"
            :page.sync="queryParams3.page"
            :limit.sync="queryParams3.rowsPerPage"
            :page-sizes="pageSizes"
            @pagination="getList3"
          />
        </div>
      </el-tab-pane>

      <!-- 培训照片 -->
      <el-tab-pane label="基地培训照片">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddTrain"
              v-hasPermi="['page:notice:add']"
              >新增</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="singleTrain"
              @click="handleUpdateTrain"
              v-hasPermi="['page:notice:edit']"
              >修改</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multipleTrain"
              @click="handleDeleteTrain"
              v-hasPermi="['page:notice:remove']"
              >删除</el-button
            >
          </el-col>
          <right-toolbar @queryTable="getListTrain"></right-toolbar>
        </el-row>

        <div style="width: 66.66666667%">
          <el-table
            v-loading="loadingTrain"
            :data="dataListTrain"
            @selection-change="handleSelectionChangeTrain"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column
              header-align="center"
              prop="url"
              align="center"
              label="图片"
            >
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="click">
                  <a
                    :href="BaseUrl + scope.row.filePath"
                    target="_blank"
                    title="查看最大化图片"
                  >
                    <img
                      :src="BaseUrl + scope.row.filePath"
                      min-width="300"
                      height="300"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="BaseUrl + scope.row.filePath"
                    min-width="100"
                    height="100"
                    style="cursor: pointer"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="链接" align="center" prop="links" />
            <el-table-column label="描述" align="center" prop="discription" />
            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      size="medium"
                      :type="scope.row.status === 0 ? 'danger' : 'success'"
                      >{{ scope.row.status === 0 ? "停用" : "正常" }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="sort" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdateTrain(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteTrain(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalTrain > 0"
            :total="totalTrain"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.rowsPerPage"
            :page-sizes="pageSizes"
            @pagination="getListTrain"
          />
        </div>
      </el-tab-pane>

      <!-- 合作伙伴 -->
      <el-tab-pane label="合作伙伴">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddPartner"
              v-hasPermi="['page:notice:add']"
              >新增</el-button
            >
          </el-col>
          <!-- <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="singlePartner"
              @click="handleUpdatePartner"
              v-hasPermi="['page:notice:edit']"
              >修改</el-button
            >
          </el-col> -->
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiplePartner"
              @click="handleDeletePartner"
              v-hasPermi="['page:notice:remove']"
              >删除</el-button
            >
          </el-col>
          <right-toolbar @queryTable="getListPartner"></right-toolbar>
        </el-row>

        <div style="width: 66.66666667%">
          <el-table
            v-loading="loadingPartner"
            :data="dataListPartner"
            @selection-change="handleSelectionChangePartner"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="标题" align="center" prop="title" />
            <el-table-column
              header-align="center"
              prop="url"
              align="center"
              label="图片"
            >
              <template slot-scope="scope">
                <el-popover placement="top-start" trigger="click">
                  <a
                    :href="BaseUrl + scope.row.filePath"
                    target="_blank"
                    title="查看最大化图片"
                  >
                    <img
                      :src="BaseUrl + scope.row.filePath"
                      min-width="300"
                      height="300"
                    />
                  </a>
                  <img
                    slot="reference"
                    :src="BaseUrl + scope.row.filePath"
                    min-width="100"
                    height="100"
                    style="cursor: pointer"
                  />
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="链接" align="center" prop="links" />

            <el-table-column label="状态" align="center" prop="status">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                  <div slot="reference" class="name-wrapper">
                    <el-tag
                      size="medium"
                      :type="scope.row.status === 0 ? 'danger' : 'success'"
                      >{{ scope.row.status === 0 ? "停用" : "正常" }}</el-tag
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="排序" align="center" prop="sort" />
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdatePartner(scope.row)"
                  v-hasPermi="['game:banner:edit']"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeletePartner(scope.row)"
                  v-hasPermi="['game:banner:remove']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="totalPartner > 0"
            :total="totalPartner"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.rowsPerPage"
            :page-sizes="pageSizes"
            @pagination="getListPartner"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  listbanner,
  getbanner,
  delbanner,
  delbanners,
  addbanner,
  updatebanner,
  listApp,
  getApp,
  delApp,
  delApps,
  addApp,
  updateApp,
  getInfo,
  addLinkAbout,
  updateLinkAbout,
  getCompanyIntroduce,
  addCompanyIntroduce,
  updateCompanyIntroduce,
  getPic,
  listPic,
  addPic,
  updatePic,
  delPic,
  delPics,
  listActivity,
  getActivity,
  delActivity,
  delActivitys,
  addActivity,
  updateActivity,
  listLink,
  getLink,
  delLink,
  delLinks,
  addLink,
  updateLink,
  listTrain,
  getTrain,
  delTrain,
  delTrains,
  addTrain,
  updateTrain,
  listPartner,
  getPartner,
  delPartner,
  delPartners,
  addPartner,
  updatePartner,
  listdiscription,
  updatediscription,
  getdiscription,
} from "@/api/page/setting";
import { getToken } from "@/utils/auth";
import { getFilebyId, delFilebyId } from "@/api/tool/file";

export default {
  name: "banner",
  data() {
    const generateData = (_) => {
      const data = [];
      const cities = ["上海", "北京", "广州", "深圳", "南京", "西安", "成都"];
      const pinyin = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "nanjing",
        "xian",
        "chengdu",
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index],
        });
      });
      return data;
    };
    return {
      pageSizes: [5, 10, 15, 20],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      BaseUrl: process.env.VUE_APP_BASE_API,
      uploadUrl: process.env.VUE_APP_BASE_API + "/officialWebsite/banna/upload", // 上传的图片服务器地址
      uploadUrl2:
        process.env.VUE_APP_BASE_API + "/officialWebsite/appaccount/upload", // 上传的图片服务器地址
      uploadUrl3:
        process.env.VUE_APP_BASE_API +
        "/officialWebsite/companyintroduce/upload",
      uploadUrlPic:
        process.env.VUE_APP_BASE_API + "/officialWebsite/piclist/upload",
      data: generateData(),
      selectValue: [],
      //右侧列表排序
      sort: "",
      //右侧列表被选中内容
      item: "",
      // 右侧列表被选中下标值
      index: "",
      renderFunc(h, option) {
        return (
          <span>
            {option.key} - {option.label}
          </span>
        );
      },
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      info: [
        {
          id: 1,
          name: "userHead",
          src: "https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1684602000&t=1a85b3ce1725775acd6cbfe56efa6af4",
        },
        {
          id: 2,
          name: "user",
          src: "https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1684602000&t=1a85b3ce1725775acd6cbfe56efa6af4",
        },
      ],
      dataList: [],
      dataList2: [],
      dataList3: [],
      dataListTrain: [],
      dataListPartner: [],
      dataListActivtiy: [],
      dataListLink: [],
      dialogImageUrl: "",
      dialogVisible: false,
      tabPosition: "left",

      // 遮罩层
      loading: true,
      loading2: true,
      loading3: true,
      loadingTrain: true,
      loadingPartner: true,
      // 选中数组
      ids: [],
      ids2: [],
      ids3: [],
      idsTrain: [],
      idsPartner: [],
      // 非单个禁用
      single: true,
      single3: true,
      singleTrain: true,
      singlePartner: true,
      // 非多个禁用
      multiple: true,
      // 非单个禁用
      single2: true,
      // 非多个禁用
      multiple2: true,
      multiple3: true,
      multipleTrain: true,
      multiplePartner: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      total2: 0,
      total3: 0,
      totalTrain: 0,
      totalLink: 0,
      totalPartner: 0,
      // 省赛管理员表格数据
      bannerList: [],
      // 弹出层标题
      title: "",
      title2: "",
      title3: "",
      titleTrain: "",
      titlePartner: "",
      // 是否显示弹出层
      open: false,
      open2: false,
      open3: false,
      openTrain: false,
      openPartner: false,
      openActivity: false,
      openLink: false,
      // 查询参数
      queryParams: {
        page: 1,
        rowsPerPage: 5,
      },
      queryParams3: {
        page: 1,
        rowsPerPage: 5,
      },
      // 表单参数
      form: {},
      form2: {},
      form3: {},
      form4: {},
      formPic: {},
      formActivity: {},
      formLink: {},
      formTrain: {},
      formPartner: {},
      formDis: {},
      // 表单校验
      // 表单校验
      rules: {
        name2: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        username: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.getList();
    this.getList2();
    this.getList3();
    this.getCompanyIntroduce();
    this.getInfo();
    this.getLinkList();
    this.getListActivity();
    this.getListTrain();
    this.getListPartner();
    this.getDiscription();
  },
  methods: {
    // 修改描述
    saveDis() {
      updatediscription(this.formDis).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1500,
          });
        }
        this.getdiscription();
      });
    },
    // 获取描述
    getDiscription() {
      let id = "0";
      getdiscription(id).then((res) => {
        this.formDis = res.data;
      });
    },
    //获取公司简介
    getCompanyIntroduce() {
      getCompanyIntroduce().then((res) => {
        this.form4 = res.data;
      });
    },
    // 关于我们信息
    getInfo() {
      getInfo(1).then((res) => {
        this.form3 = res.data;
      });
    },
    // 上传
    handleAvatarSuccess(res, file) {
      if (res.code == 200) {
        // this.isupload = true;
        this.form.fileId = res.data;
        // this.sizeForm.fileList.push(file);
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.form.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
        console.log("数据" + res.data);
      }
    },
    // 品牌活动上传
    handleAvatarSuccessActivity(res, file) {
      if (res.code == 200) {
        // this.isupload = true;
        this.formActivity.fileId = res.data;
        // this.sizeForm.fileList.push(file);
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.formActivity.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
        console.log("数据" + res.data);
      }
    },
    // app上传
    handleAvatarSuccess2(res, file) {
      if (res.code == 200) {
        this.form2.fileId = res.data;
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.form2.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
      }
    },

    // 图片list
    handleAvatarSuccessPic(res, file) {
      if (res.code == 200) {
        this.formPic.fileId = res.data;
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.formPic.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
      }
    },

    // 培训
    handleAvatarSuccessTrain(res, file) {
      if (res.code == 200) {
        this.formTrain.fileId = res.data;
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.formTrain.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
      }
    },

    // 合作列表
    handleAvatarSuccessPartner(res, file) {
      if (res.code == 200) {
        this.formPartner.fileId = res.data;
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.formPartner.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
      }
    },

    // 公司简介
    handleAvatarSuccess4(res, file) {
      if (res.code == 200) {
        this.form4.fileId = res.data;
        getFilebyId(res.data).then((res) => {
          if (res.code === 200) {
            this.form4.filePath = res.data.filePath;
            this.$message({
              message: "文件上传成功",
              type: "success",
              duration: 1500,
            });
          }
        });
      }
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG / PNG格式!");
      }
      if (!isLt2M && !isPNG) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    //     beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";

    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   console.log("type==" + isJPG);
    //   if (!isJPG && !isPNG) {
    //     this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M && isPNG;
    // },

    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isPNG = file.type === "image/png";
    //   const isLt2M = file.size / 1024 / 1024 < 2;
    //   console.log("type==" + isJPG);
    //   if (!isJPG && !isPNG) {
    //     this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M && isPNG;
    // },

    //上传
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.status === "0" ? "停用" : "启用";
      this.$modal
        .confirm('确认要"' + text + '""' + row.name + '"用户吗？')
        .then(function () {
          return changeUserStatus(row.id, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "0" : "1";
        });
    },
    /** 查询banner列表 */

    getList() {
      this.loading = true;
      listbanner(this.queryParams).then((response) => {
        this.dataList = response.data.list;
        this.total = response.data.totalCount;
        this.loading = false;
      });
    },

    // 培训
    getListTrain() {
      this.loadingTrain = true;
      listTrain(this.queryParams).then((response) => {
        this.dataListTrain = response.data.list;
        this.totalTrain = response.data.totalCount;
        this.loadingTrain = false;
      });
    },
    // 获取活动列表
    getListActivity() {
      this.loading = true;
      listActivity(this.queryParams).then((response) => {
        this.dataListActivtiy = response.data.list;
        this.total = response.data.totalCount;
        this.loading = false;
      });
    },

    // 获取链接地址列表
    getLinkList() {
      this.loading = true;
      listLink(this.queryParams).then((response) => {
        this.dataListLink = response.data.list;
        this.totalLink = response.data.totalCount;
        this.loading = false;
      });
    },

    //查询app 公众号列表
    getList2() {
      this.loading2 = true;
      listApp(this.queryParams).then((response) => {
        this.dataList2 = response.data.list;
        this.total2 = response.data.totalCount;
        this.loading2 = false;
      });
    },

    //查询图片列表
    getList3() {
      this.loading3 = true;
      listPic(this.queryParams3).then((response) => {
        this.dataList3 = response.data.list;
        this.total3 = response.data.totalCount;
        this.loading3 = false;
      });
    },

    // 合作伙伴
    getListPartner() {
      this.loadingPartner = true;
      listPartner(this.queryParams).then((response) => {
        this.dataListPartner = response.data.list;
        this.totalPartner = response.data.totalCount;
        this.loadingPartner = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    cancelActivity() {
      this.openActivity = false;
      this.resetActivity();
    },

    cancelLink() {
      this.openLink = false;
      this.resetLink();
    },
    cancel2() {
      this.open2 = false;
      this.reset2();
    },
    // 关于我们取消
    cancel3() {
      this.getInfo();
    },

    //图片list
    cancelPic() {
      this.open3 = false;
      this.reset3();
    },

    cancelTrain() {
      this.openTrain = false;
      this.resetTrain();
    },

    cancelPartner() {
      this.openPartner = false;
      this.resetPartner();
    },
    //公司简介取消
    cancel4() {
      this.getCompanyIntroduce();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        links: null,
        fileId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("form");
    },
    resetActivity() {
      this.formActivity = {
        id: null,
        links: null,
        fileId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        discription: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("formActivity");
    },
    resetLink() {
      this.formLink = {
        id: null,
        links: null,
        title: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("formLink");
    },

    reset3() {
      this.formPic = {
        id: null,
        links: null,
        fileId: null,
        createBy: null,
        discription: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("formPic");
    },

    resetTrain() {
      this.formTrain = {
        id: null,
        links: null,
        fileId: null,
        createBy: null,
        discription: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("formTrain");
    },

    resetPartner() {
      this.formPartner = {
        id: null,
        links: null,
        fileId: null,
        createBy: null,
        discription: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("formPartner");
    },

    reset2() {
      this.form2 = {
        id: null,
        name: null,
        fileId: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        sort: null,
        status: null,
        filePath: null,
      };
      this.resetForm("form2");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handleSelectionChange2(selection) {
      this.ids2 = selection.map((item) => item.id);
      this.single2 = selection.length !== 1;
      this.multiple2 = !selection.length;
    },
    handleSelectionChange3(selection) {
      this.ids3 = selection.map((item) => item.id);
      this.single3 = selection.length !== 1;
      this.multiple3 = !selection.length;
    },

    handleSelectionChangeTrain(selection) {
      this.idsTrain = selection.map((item) => item.id);
      this.singleTrain = selection.length !== 1;
      this.multipleTrain = !selection.length;
    },

    handleSelectionChangePartner(selection) {
      this.idsPartner = selection.map((item) => item.id);
      this.singlePartner = selection.length !== 1;
      this.multiplePartner = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "修改banner";
    },
    // 品牌列表添加
    handleAddActivity() {
      this.resetActivity();
      this.openActivity = true;
      this.title = "添加品牌活动";
    },

    //友情链接添加
    handleAddLink() {
      this.resetLink();
      this.openLink = true;
      this.title = "添加友情链接";
    },

    // 新增图片列表
    handleAdd3() {
      this.reset3();
      this.open3 = true;
      this.title3 = "新增图片";
    },

    // 新增培训图片
    handleAddTrain() {
      this.resetTrain();
      this.openTrain = true;
      this.titleTrain = "新增培训";
    },

    // 合作伙伴
    handleAddPartner() {
      this.resetPartner();
      this.openPartner = true;
      this.titlePartner = "新增合作伙伴";
    },
    // app新增
    handleAdd2() {
      this.reset2();
      this.open2 = true;
      this.title2 = "修改App&公众号";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.open = true;
      getbanner(row.id).then((response) => {
        this.form = response.data;
        this.open = true;
        this.title = "修改banner";
      });
    },
    // 活动模块修改
    handleUpdateActivity(row) {
      this.resetActivity();
      this.openActivity = true;
      getActivity(row.id).then((response) => {
        this.formActivity = response.data;
        getFilebyId(response.data.fileId).then((res) => {
          if (res.code === 200) {
            this.formActivity.filePath = res.data.filePath;
          }
        });
        this.openActivity = true;
        this.title = "修改活动模块";
      });
    },

    // 友情链接修改
    handleUpdateLink(row) {
      this.resetLink();
      this.openLink = true;
      getLink(row.id).then((response) => {
        this.formLink = response.data;
        this.openLink = true;
        this.title = "修改友情链接";
      });
    },
    // 图片列表修改
    handleUpdate3(row) {
      this.reset3();
      this.open3 = true;
      getPic(row.id).then((response) => {
        this.formPic = response.data;
        this.open3 = true;
        this.title3 = "修改图片";
      });
    },

    // 培训列表修改
    handleUpdateTrain(row) {
      this.resetTrain();
      this.openTrain = true;
      getTrain(row.id).then((response) => {
        this.formTrain = response.data;
        this.openTrain = true;
        this.titleTrain = "修改培训图片";
      });
    },

    // 合作伙伴
    handleUpdatePartner(row) {
      this.resetPartner();
      this.openPartner = true;
      getPartner(row.id).then((response) => {
        this.formPartner = response.data;
        this.openPartner = true;
        this.titlePartner = "修改合作伙伴";
      });
    },

    // app修改
    handleUpdate2(row) {
      this.reset2();
      this.open2 = true;
      getApp(row.id).then((response) => {
        this.form2 = response.data;
        this.open2 = true;
        this.title2 = "修改App&公众号";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updatebanner(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addbanner(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },

    // 品牌活动提交
    submitFormActivity() {
      this.$refs["formActivity"].validate((valid) => {
        if (valid) {
          if (this.formActivity.id != null) {
            updateActivity(this.formActivity).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openActivity = false;
              this.getListActivity();
            });
          } else {
            addActivity(this.formActivity).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openActivity = false;
              this.getListActivity();
            });
          }
        }
      });
    },

    //友情链接提交
    submitFormLink() {
      this.$refs["formLink"].validate((valid) => {
        if (valid) {
          if (this.formLink.id != null) {
            updateLink(this.formLink).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openLink = false;
              this.getLinkList();
            });
          } else {
            addLink(this.formLink).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openLink = false;
              this.getLinkList();
            });
          }
        }
      });
    },
    // app提交
    submitForm2() {
      this.$refs["form2"].validate((valid) => {
        if (valid) {
          if (this.form2.id != null) {
            updateApp(this.form2).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open2 = false;
              this.getList2();
            });
          } else {
            addApp(this.form2).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open2 = false;
              this.getList2();
            });
          }
        }
      });
    },
    // 关于我们提交
    submitForm3() {
      this.$refs["form3"].validate((valid) => {
        if (valid) {
          if (this.form3.id != null) {
            updateLinkAbout(this.form3).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getInfo();
            });
          } else {
            addLinkAbout(this.form3).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getInfo();
            });
          }
        }
      });
    },

    //公司简介提交
    submitForm4() {
      this.$refs["form4"].validate((valid) => {
        if (valid) {
          if (this.form4.id != null) {
            addCompanyIntroduce(this.form4).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getCompanyIntroduce();
            });
          } else {
            updateCompanyIntroduce(this.form4).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getCompanyIntroduce();
            });
          }
        }
      });
    },

    // 图片list提交
    submitFormPic() {
      this.$refs["formPic"].validate((valid) => {
        if (valid) {
          if (this.formPic.id != null) {
            addPic(this.formPic).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getList3();
              this.open3 = false;
            });
          } else {
            updatePic(this.formPic).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getList3();
              this.open3 = false;
            });
          }
        }
      });
    },

    // 培训提交
    submitFormTrain() {
      this.$refs["formTrain"].validate((valid) => {
        if (valid) {
          if (this.formTrain.id != null) {
            addTrain(this.formTrain).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getListTrain();
              this.openTrain = false;
            });
          } else {
            updateTrain(this.formTrain).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getListTrain();
              this.openTrain = false;
            });
          }
        }
      });
    },

    // 合作列表
    submitFormPartner() {
      this.$refs["formPartner"].validate((valid) => {
        if (valid) {
          if (this.formPartner.id != null) {
            addPartner(this.formPartner).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.getListPartner();
              this.openPartner = false;
            });
          } else {
            updatePartner(this.formPartner).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.getListPartner();
              this.openPartner = false;
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delbanner(row.id);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.ids) {
        const ids = this.ids.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delbanners(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    //品牌活动删除
    handleDeleteActivity(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delActivity(row.id);
          })
          .then(() => {
            this.getListActivity();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.ids) {
        const ids = this.ids.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delActivitys(ids);
          })
          .then(() => {
            this.getListActivity();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    //友情链接删除
    handleDeleteLink(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delLink(row.id);
          })
          .then(() => {
            this.getLinkList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.ids) {
        const ids = this.ids.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delLinks(ids);
          })
          .then(() => {
            this.getLinkList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    //删除图片列表
    handleDelete3(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delPic(row.id);
          })
          .then(() => {
            this.getList3();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.ids) {
        const ids = this.ids.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delPics(ids);
          })
          .then(() => {
            this.getList3();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    //删除图片列表
    handleDeleteTrain(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delTrain(row.id);
          })
          .then(() => {
            this.getListTrain();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.idsTrain) {
        const ids = this.idsTrain.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delTrains(ids);
          })
          .then(() => {
            this.getListTrain();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    // 删除合作伙伴
    handleDeletePartner(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delPartner(row.id);
          })
          .then(() => {
            this.getListPartner();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.idsPartner) {
        const ids = this.idsPartner.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delPartners(ids);
          })
          .then(() => {
            this.getListPartner();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },

    // app删除
    handleDelete2(row) {
      if (row.id) {
        this.$modal
          .confirm('是否确认删除"' + row.id + '"的数据项？')
          .then(function () {
            return delApp(row.id);
          })
          .then(() => {
            this.getList2();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
      if (!row.id && this.ids2) {
        const ids = this.ids2.join(",");
        this.$modal
          .confirm('是否确认删除"' + ids + '"的数据项？')
          .then(function () {
            return delApps(ids);
          })
          .then(() => {
            this.getList2();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "game/banner/export",
        {
          ...this.queryParams,
        },
        `banner_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style  scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.transfer-footer {
  margin-left: 20px;
  padding: 6px 5px;
}
.el-transfer-panel__list.is-filterable {
  height: 159px;
  padding-top: 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* “Tissue Search”字体样式 */
.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}
/* 图片总布局，样式 */
.images {
  display: flex;
  margin-top: 20px;
  margin-left: 21px;
  margin-right: 20px;
  flex-wrap: wrap;
}
/* 图片之间 */
.image-middle {
  margin-right: 15px;
  margin-bottom: 15px;
}
/* 单张图片样式 */
.image {
  width: 110px;
  height: 110px;
}
</style>